<template>
  <div>
    <supertable
      class="bannertable"
      lazy
      :tableData="tableData"
      :headerData="headerData"
      :isoperation="false"
      :ispagination="false"
      :height="1000"
    >
      <template v-slot:down="row">
        <div>
          <span
            class="el-icon-arrow-right"
            v-if="row.row.$index == '0' && arrowright == '1'"
            @click="arrowright1()"
          ></span>
          <span
            class="el-icon-arrow-down"
            v-if="row.row.$index == '0' && arrowright == '2'"
            @click="arrowright1()"
          ></span>
        </div>
      </template>
      <template v-slot:icon="row">
        <div>
          <el-image
            :src="row.row.icon"
            style="width:50px;height:auto"
          ></el-image>
        </div>
      </template>
      <template v-slot:showIndex="row">
        <div>
          <el-switch
            v-model="row.row.showIndex"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </div>
      </template>

      <template v-slot:operation="row">
        <div>
          <el-button
            style="color:dodgerblue;border:none;background-color: transparent;"
            v-model="row.row.operation"
            type="mini"
            ><i class="el-icon-edit"></i> 修改</el-button
          >
          <el-button
            style="color:dodgerblue;border:none;background-color: transparent;"
            v-model="row.row.operation"
            type="mini"
            ><i class="el-icon-delete"></i> 删除</el-button
          >
        </div>
      </template>
      <template v-slot:btnSolt>
        <div class="bannerBtn">
          <el-button
            type="success"
            size="mini"
            icon="el-icon-plus"
            @click.native="add"
            >添加</el-button
          >
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click.native="remove"
            >删除</el-button
          >
        </div>
      </template>
      <template v-slot:simplename="row">
        <div>
          <el-button type="text" @click="editItem(row.row)">{{
            row.row.simplename
          }}</el-button>
        </div>
      </template>
    </supertable>
    <div>
      <el-dialog
        title="添加菜单"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose"
        v-DragWindow
      >
        <div class="elForm">
          <el-row>
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              :show-message="false"
              class="demo-ruleForm"
            >
              <el-col :span="12">
                <el-form-item label="名称" prop="simplename">
                  <el-input v-model="ruleForm.simplename"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                  <el-input v-model="ruleForm.sort"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="全称" prop="fullname">
                  <el-input v-model="ruleForm.fullname"></el-input>
                </el-form-item>
                <el-form-item label="父部门">
                  <treeselect
                    v-model="form.pid"
                    :options="deptTree.data"
                    placeholder="请选择所属部门"
                  />
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">提 交</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
//引入组件
import supertable from "@/components/supertable";
import {
  DepartmentManagementlist,
  list,
  save,
  del
} from "@/api/SystemManagement";
export default {
  name: "DepartmentManagement",
  data() {
    return {
      expandAll: true,
      data: [],
      dialogVisible: false,
      formTitle: "",
      isAdd: false,
      deptTree: {
        data: []
      },
      form: {
        id: "",
        simplename: "",
        fullname: "",
        pid: undefined,
        num: ""
      },
      rules: {
        simplename: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }
        ],
        fullname: [
          { required: true, message: "请输入编码", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ],
        num: [{ required: true, message: "请输入排序", trigger: "blur" }]
      },
      treeshow: false,
      defaultProps: {
        children: "children",
        label: "label"
      },
      state: true,
      value: true,
      arrowright: "1",
      input: "",
      headerData: [
        {
          prop: "down",
          label: " ",
          slot: true,
          width: "20%"
        },
        {
          prop: "simplename",
          label: "简称",
          width: "100",
          slot: true
        },
        {
          prop: "fullname",
          label: "全称",
          width: "70%"
        },
        {
          prop: "num",
          label: "顺序",
          width: "70%"
        },
        {
          prop: "operation",
          label: "操作",
          // width: "100%",
          slot: true
        }
      ],
      tableData: [],
      Manlist: [],
      ruleForm: {
        simplename: "",
        fullname: "",
        father_department: "",
        sort: ""
      },
      rules: {
        simplename: [{ required: true, trigger: "blur" }],
        fullname: [{ required: true, trigger: "blur" }],
        sort: [{ required: true, trigger: "blur" }]
      }
    };
  },
  async mounted() {
    let _self = this;
    await _self.DepartmentManagementlistFn();
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      list().then(response => {
        this.data = response.data;
        this.deptTree.data = response.data;
        this.listLoading = false;
      });
    },
    save() {
      let _self = this;
      _self.dialogVisible = false;
      //   var _self = this;
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          console.log("ruleForm", _self.form);
          const menuData = {
            id: _self.ruleForm.id,
            simplename: _self.ruleForm.simplename,
            fullname: _self.ruleForm.fullname,
            num: _self.ruleForm.num,
            pid: _self.ruleForm.pid
          }; //_self.form
          menuData.parent = null;
          save(menuData).then(response => {
            console.log(response);
            this.$message({
              message: "提交成功",
              type: "success"
            });
            _self.fetchData();
          });
        } else {
          return false;
        }
      });
    },
    //弹窗关闭提示
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //banner添加
    checkSel() {
      if (this.selRow && this.selRow.id) {
        return true;
      }
      this.$message({
        message: "请选中操作项",
        type: "warning"
      });
      return false;
    },
    //添加
    add() {
      let _self = this;
      _self.dialogVisible = true;
      _self.form = {};
      _self.formTitle = "添加菜单";
      _self.dialogVisible = true;
      _self.isAdd = true;
    },
    arrowright1() {
      let _self = this;
      _self.tableData = [];
      if (_self.arrowright == 1) {
        _self.arrowright = 2;
        for (let item of _self.Manlist) {
          _self.tableData.push({
            num: item.num,
            fullname: item.fullname,
            operation: "",
            simplename: item.simplename
          });

          if (item.children.length != 0) {
            for (let items of item.children) {
              _self.tableData.push({
                num: items.num,
                fullname: items.fullname,
                operation: "",
                simplename: items.simplename
              });
            }
          }
        }
      } else {
        _self.arrowright = 1;
        for (let item of _self.Manlist) {
          _self.tableData.push({
            num: item.num,
            fullname: item.fullname,
            operation: "",
            simplename: item.simplename
          });
        }
      }
    },
    //id title type page param idFile
    // 商品列表数据
    async DepartmentManagementlistFn() {
      let _self = this;
      _self.tableData = [];
      let data = {
        title: _self.input
      };
      await DepartmentManagementlist(data).then(res => {
        console.log(res);
        if (res.code == 20000) {
          _self.Manlist = res.data;
          for (let item of res.data) {
            _self.tableData.push({
              num: item.num,
              fullname: item.fullname,
              operation: "",
              simplename: item.simplename
            });

            // if (item.children.length != 0 ) {
            //   for (let items of item.children) {
            //     _self.tableData.push({
            //       num: items.num,
            //       fullname: items.fullname,
            //       operation: "",
            //       simplename: items.simplename
            //     });
            //   }
            // }
          }
        }
      });
    },
    departmentClick() {
      let _self = this;
      _self.treeshow = !_self.treeshow;
    },
    checkSel() {
      if (this.selRow && this.selRow.id) {
        return true;
      }
      this.$message({
        message: "请选中操作项",
        type: "warning"
      });
      return false;
    },
    editItem(record) {
      this.selRow = Object.assign({}, record);
      if (this.selRow.pid === "0") {
        this.selRow.pid = undefined;
      }
      this.edit();
    },
    edit() {
      if (this.checkSel()) {
        this.isAdd = false;
        this.form = Object.assign({}, this.selRow);
        this.form.statusBool = this.form.statusName === "启用";
        this.form.password = "";
        this.formTitle = "修改用户";
        this.dialogVisible = true;
      }
    },
    removeItem(record) {
      this.selRow = record;
      this.remove();
    },
    remove() {
      if (this.checkSel()) {
        this.$confirm("确定删除该记录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          const row = this.selRow;
          del(row.id).then(response => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.fetchData();
          });
        });
      }
    }
  },
  // component:{组件定义名字：该组件的路径}
  components: {
    supertable
  }
};
</script>
<style scoped lang="">
.bannerinput {
  margin: 10px 10px;
  width: 400px;
}
.bannertable {
  margin: 10px;
  overflow: hidden;
}
.bannerBtn {
  margin: 10px;
}
.el-image {
  width: 200px;
  height: 100px;
}
.elForm .el-form-item {
  margin: 5px 0;
}
</style>
